<template>
    <header :style="{ background: backgroundColor }">
        <div class="container-box" :style="{boxShadow: boxShadow}">
            <div class="left">
                <slot name="left"></slot>
            </div>
            <span :style="{ color: fontColor }">
                {{ title }}
            </span>
            <div class="right">
                <slot name="right"></slot>
            </div>
        </div>
    </header>
    <div class="divide">

    </div>
</template>

<script setup>
import { reactive } from 'vue'
const props = defineProps({
    title: {
        type: String
    },
    backgroundColor: {
        type: String
    },
    boxShadow: {
        type: String
    },
    fontColor: {
        type: String
    },
})

const headerStyle = reactive({
    backgroundColor: props.backgroundColor || '#F44336',
})

</script>

<style lang="less" scoped>
header {
    background-color: #F44336;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99;
    .container-box {
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 0px 0px 8px #9e9e9e;
        width: 390px;
        height: 55px;
        position: relative;

        .left {
            position: absolute;
            left: 0px;
        }
        .right {
            position: absolute;
            right: 5px;
        }
        span {
            font-size: 22px;
            color: #FFF;
        }
    }
}

.divide {
    width: 100%;
    height: 55px;
}
</style>